const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = env => {
    return {
        mode: env.production ? 'production' : 'development',
        entry: {
            app: './src/js/main.js'
        },
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            compress: true,
            port: 3000
        },
        module: {
            rules: [{
                test: /\.html$/,
                use: [
                    'html-loader'
                ]
            }, {
                test: /\.vue$/,
                use: 'vue-loader' 
            }, {
                test: /\.css$/,
                use: [
                    {
                    loader: env.production ? MiniCssExtractPlugin.loader
                        : 'vue-style-loader'
                }, {
                    loader: 'css-loader'
                }]
            }, {
                test: /\.scss$/,
                use: [
                    {
                        loader: env.production ? MiniCssExtractPlugin.loader
                            : 'vue-style-loader'
                    },
                    { loader: 'css-loader' },
                    'sass-loader'
                ]
            }, {
                test: /\.(eot|ttf|woff|woff2)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }, {
                test: /\.(png|jpg|gif|jpeg|svg|webp)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false, //启用CommonJS模块语法
                            limit: 8192
                        }
                    }
                ]
            }]
        },
        plugins: [
            // 清楚上一次生成的dist文件夹下的文件
            new CleanWebpackPlugin(),
            // 根据自定的模板文件
            new HtmlWebpackPlugin({
                title: 'This Is A Title',
                filename: 'index.html',
                template: './src/js/views/index.html'
            }),
            //vue-loader所需插件
            new VueLoaderPlugin(),
            //将多个 css文件打包成一个css文件
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: '[id].css',
                ignoreOrder: false,
            }),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify('production')
                }
            }),
        ],
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        output: {
            filename: '[name].min.js',
            path: path.resolve(__dirname, 'dist')
        }
    };
}
